<template>
	<view class="container">
		<block v-if="isload">
			<block v-if="express_com == '货运托运'">
				<view class="orderinfo">
					<block v-if="datalist.pic">
						<view class="item">
							<text class="t1">物流单照片</text>
						</view>
						<view class="item">
							<image class="t2" :src="datalist.pic" @tap="previewImage" :data-url="datalist.pic"
								mode="widthFix" />
						</view>
					</block>
					<view class="item" v-if="datalist.fhname">
						<text class="t1">发货人信息</text>
						<text class="t2">{{ datalist.fhname }}</text>
					</view>
					<view class="item" v-if="datalist.fhaddress">
						<text class="t1">发货地址</text>
						<text class="t2">{{ datalist.fhaddress }}</text>
					</view>
					<view class="item" v-if="datalist.shname">
						<text class="t1">收货人信息</text>
						<text class="t2">{{ datalist.shname }}</text>
					</view>
					<view class="item" v-if="datalist.shaddress">
						<text class="t1">收货地址</text>
						<text class="t2">{{ datalist.shaddress }}</text>
					</view>
					<view class="item" v-if="datalist.remark">
						<text class="t1">备注</text>
						<text class="t2">{{ datalist.remark }}</text>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="expressinfo">
					<!-- <view class="head">
						<view class="f1">
							<image :src="static_url + '/static/img/feiji.png'"></image>
						</view>
						<view class="f2">
							<view class="t1">快递公司：<text style="color:#333">{{express_com}}</text></view>
							<view class="t2">快递单号：<text style="color:#333">{{express_no}}</text></view>
						</view>
					</view> -->
					<view class="content">
						<view class="content-title">
							<view class="content-title-left">
								<view class="feiji">
									<image class="feiji" :src="static_url + '/static/img/location/direct-icon.png'">
									</image>
								</view>
								<view class="">
									<text class="express_com">{{ (detail.express_com == null || detail.express_com ==
										undefined) ? '' : detail.express_com }}</text>
									<text class="express_no">{{ (detail.express_no == null || detail.express_no ==
										undefined) ? '' : detail.express_no }}</text>

								</view>


							</view>
							<view class="copy-btn" @tap.stop="copy" :data-text="express_no"
								v-if="detail.express_com && detail.express_no">
								复制
							</view>
						</view>
						<block v-if="data_list.type == 2">
							<scroll-view scroll-x>
								<view class="tab-header">
									<view v-for="(tab, index) in data_list.datalist" :key="index" class="tab-item"
										:class="{ active: currentTab == index }" @tap="switchTab(index, tab)">
										{{ tab.express_no.split(':')[0] }}
									</view>
								</view>
							</scroll-view>
						</block>
						<view class="address">
							<text>收货地址：</text> {{ detail.area }}{{ detail.address }}
						</view>
						<view v-for="(item, index) in datalist" :key="index"
							:class="'item ' + (index == 0 ? 'on' : '')">
							<view class="f1">
								<view v-if="item.status == '运输中'">
									<view v-if="hideIndex == index">
										<image
											src="https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/8953d279d7a7b458fc7d391e26a7cc3e.png">
										</image>
									</view>
									<view v-if="hideIndex !== index" class="dot">
										<image class="dot-img" src="/static/img/dot1.png" mode=""></image>
									</view>
								</view>
								<view v-if="item.status == '派送中'">
									<image
										src="https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/f13fd675bd4357f9d9595d2304b08e08.png">
									</image>
								</view>
								<view v-if="item.status == '已签收'">
									<image :src="static_url + '/static/img/location/circle-icon.png'"></image>
								</view>
							</view>
							<view class="f2">
								<text class="status"
									v-if="hideIndex == index || item.status == '派送中' || item.status == '已签收'">{{
										item.status }}</text>
								<text class="t1">{{ item.AcceptStation }}</text>
								<text class="t2 t2-time">{{ item.AcceptTime }}</text>
							</view>
						</view>
						<nodata v-if="nodata" text="暂未查找到物流信息"></nodata>
					</view>
				</view>
			</block>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();

export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,

			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			nodata: false,
			express_com: '',
			express_no: '',
			type: '',
			datalist: [],

			orderinfo: {},
			prolist: [],
			binfo: {},
			psuser: {},
			psorder: {},
			shop_tel: '',
			detail: '',
			hideIndex: null,
			currentTab: null,
			data_list: [],
			data_type: {},
			currentExpressNo: ''
		};
	},

	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		if (opt.jf_type == 1) {
			this.getjfdetail()
		}
		this.getdata();
		this.getdetail()
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	methods: {
		getjfdetail: function () {
			var that = this;
			that.loading = true;
			app.get('ApiScoreshop/orderdetail', {
				id: that.opt.id
			}, function (res) {
				that.loading = false;

				that.detail = res.detail;

			});
		},
		getdetail: function () {
			var that = this;
			that.loading = true;
			let url ;
			if(that.opt.from_order_type== 'scoreshop'){
				url = 'ApiScoreshop/orderdetail'
			}else if(that.opt.from_order_type == 'shop'){
				url = 'Order/detail'
			}
			app.get(url, {
				id: that.opt.from_order_type == 'shop' ? that.opt.id : that.opt.from_order_id
			}, function (res) {
				that.loading = false;

				that.detail = res.detail;

			});
		},
		switchTab(index, item) {
			this.currentTab = index
			// 处理 datalist，添加状态字段
			this.datalist = item.logistics.map(i => {
				let status = '运输中'; // 默认状态是 运输中

				// 确保 AcceptStation 是字符串，并且进行相关判断
				if (typeof i.AcceptStation === 'string') {
					if (i.AcceptStation.includes("派送中") && i.AcceptStation.includes("签收")) {
						// 如果两个关键字都包含，选择先出现的那个
						if (i.AcceptStation.indexOf("派送中") < i.AcceptStation.indexOf("签收")) {
							status = '派送中';
						} else {
							status = '已签收';
						}
					} else if (i.AcceptStation.includes("签收")) {
						status = '已签收';
					} else if (i.AcceptStation.includes("派送中")) {
						status = '派送中';
					}
				}

				return {
					...i,
					status: status // 添加 status 字段
				};
			});

			// 查找第一个“运输中”的索引并更新
			for (var index = 0; index < this.datalist.length; index++) {
				var element = this.datalist[index];
				if (element.status == '运输中') {
					this.hideIndex = index;
					break;
				}
			}

		},
		getdata: function () {
			var that = this;

			that.express_com = that.opt.express_com;
			that.express_no = that.opt.express_no;
			that.type = that.opt.type;

			that.loading = true;
			app.get('Order/logistics', {
				express_com: that.express_com,
				express_no: that.express_no,
				type: that.type,
				order_id: that.opt.id
			}, function (res) {
				that.loading = false;

				if (that.express_com == '同城配送') {
					that.orderinfo = res.orderinfo;
					that.prolist = res.prolist;
					that.binfo = res.binfo;
					that.psorder = res.psorder;
					that.psuser = res.psuser;
					if (res.shop_tel) {
						that.shop_tel = res.shop_tel;
					}

					// 每10秒刷新数据，避免重复请求
					if (!that.loading) {
						setTimeout(function () {
							that.getdata();
						}, 10000); // 10秒后重新请求
					}

				} else {
					var datalist = res.data.datalist;
					that.data_list = res.data
					if (datalist.length < 1) {
						that.nodata = true;
						return; // 如果没有数据，直接返回
					}
					if (res.data.type == 1) {
						// 处理 datalist，添加状态字段
						that.datalist = datalist.map(item => {
							let status = '运输中'; // 默认状态是 运输中

							// 确保 AcceptStation 是字符串，并且进行相关判断
							if (typeof item.AcceptStation === 'string') {
								if (item.AcceptStation.includes("派送中") && item.AcceptStation
									.includes("签收")) {
									// 如果两个关键字都包含，选择先出现的那个
									if (item.AcceptStation.indexOf("派送中") < item.AcceptStation
										.indexOf("签收")) {
										status = '派送中';
									} else {
										status = '已签收';
									}
								} else if (item.AcceptStation.includes("签收")) {
									status = '已签收';
								} else if (item.AcceptStation.includes("派送中")) {
									status = '派送中';
								}
							}

							return {
								...item,
								status: status // 添加 status 字段
							};
						});

						// 查找第一个“运输中”的索引并更新
						for (var index = 0; index < that.datalist.length; index++) {
							var element = that.datalist[index];
							if (element.status == '运输中') {
								that.hideIndex = index;
								break;
							}
						}
					}
					if (res.data.type == 2) {

						datalist.forEach(item => {
							let express_no = item.express_no.split(':')[0]

							let matchedOrder = datalist.find(item => item.express_com == that.express_com && express_no == that.express_no);
							if (matchedOrder) {
								that.datalist = matchedOrder.logistics
								// 处理 datalist，添加状态字段
								that.datalist = item.logistics.map(item => {
									let status = '运输中'; // 默认状态是 运输中

									// 确保 AcceptStation 是字符串，并且进行相关判断
									if (typeof item.AcceptStation === 'string') {
										if (item.AcceptStation.includes("派送中") && item
											.AcceptStation.includes("签收")) {
											// 如果两个关键字都包含，选择先出现的那个
											if (item.AcceptStation.indexOf("派送中") < item
												.AcceptStation.indexOf("签收")) {
												status = '派送中';
											} else {
												status = '已签收';
											}
										} else if (item.AcceptStation.includes("签收")) {
											status = '已签收';
										} else if (item.AcceptStation.includes("派送中")) {
											status = '派送中';
										}
									}

									return {
										...item,
										status: status // 添加 status 字段
									};
								});

								// 查找第一个“运输中”的索引并更新
								for (var index = 0; index < that.datalist.length; index++) {
									var element = that.datalist[index];
									if (element.status == '运输中') {
										that.hideIndex = index;
										break;
									}
								}
							} else {
								console.log("没有找到匹配的订单");
							}


						});
					}

				}

				that.loaded();
			})
		},

		call: function (e) {
			var tel = e.currentTarget.dataset.tel;
			uni.makePhoneCall({
				phoneNumber: tel
			});
		}
	}
}
</script>
<style>
.expressinfo .head {
	width: 100%;
	background: #fff;
	margin: 20rpx 0;
	padding: 20rpx 20rpx;
	display: flex;
	align-items: center
}

.expressinfo .head .f1 {
	width: 120rpx;
	height: 120rpx;
	margin-right: 20rpx
}

.expressinfo .head .f1 image {
	width: 100%;
	height: 100%
}

.expressinfo .head .f2 {
	display: flex;
	flex-direction: column;
	flex: auto;
	font-size: 30rpx;
	color: #999999
}

.expressinfo .head .f2 .t1 {
	margin-bottom: 8rpx
}

.expressinfo .content {
	width: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	color: #979797;
	padding: 20rpx 40rpx
}

.expressinfo .content .on {
	color: #000;
}

.expressinfo .content .item {
	display: flex;
	width: 96%;
	margin: 0 2%;
	border-left: 1px #dadada solid;
	padding: 10rpx 0
}

.expressinfo .content .item .f1 {
	width: 40rpx;
	flex-shrink: 0;
	position: relative
}

.expressinfo .content .item .f1 image {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	left: -16rpx;
	top: 22rpx;
}

/*.content .on image{ top:-1rpx}*/
.expressinfo .content .item .f1 image {
	width: 30rpx;
	height: 30rpx;
}

.expressinfo .content .item .f2 {
	display: flex;
	flex-direction: column;
	flex: auto;
}

.expressinfo .content .item .f2 .t1 {
	font-size: 30rpx;
}

.expressinfo .content .item .f2 .t1 {
	font-size: 26rpx;
}


.map {
	width: 100%;
	height: 500rpx;
	overflow: hidden
}

.ordertop {
	width: 100%;
	height: 220rpx;
	padding: 50rpx 0 0 70rpx
}

.ordertop .f1 {
	color: #fff
}

.ordertop .f1 .t1 {
	font-size: 32rpx;
	height: 60rpx;
	line-height: 60rpx
}

.ordertop .f1 .t2 {
	font-size: 24rpx
}

.order-box {
	width: 94%;
	margin: 20rpx 3%;
	padding: 6rpx 3%;
	background: #fff;
	border-radius: 8px
}

.order-box .head {
	display: flex;
	width: 100%;
	border-bottom: 1px #f5f5f5 solid;
	height: 88rpx;
	line-height: 88rpx;
	overflow: hidden;
	color: #999;
}

.order-box .head .f1 {
	display: flex;
	align-items: center;
	color: #222222
}

.order-box .head .f1 .img {
	width: 24rpx;
	height: 24rpx;
	margin-right: 4px
}

.order-box .head .f1 .t1 {
	color: #06A051;
	margin-right: 10rpx
}

.order-box .head .f2 {
	color: #FF6F30
}

.order-box .head .f2 .t1 {
	font-size: 36rpx;
	margin-right: 4rpx
}

.order-box .content {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 16rpx 0px;
	border-bottom: 1px solid #f5f5f5;
	position: relative
}

.order-box .content .f1 {
	width: 100rpx;
	display: flex;
	flex-direction: column;
	align-items: center
}

.order-box .content .f1 .t1 {
	display: flex;
	flex-direction: column;
	align-items: center
}

.order-box .content .f1 .t1 .x1 {
	color: #FF6F30;
	font-size: 28rpx;
	font-weight: bold
}

.order-box .content .f1 .t1 .x2 {
	color: #999999;
	font-size: 24rpx;
	margin-bottom: 8rpx
}

.order-box .content .f1 .t2 .img {
	width: 12rpx;
	height: 36rpx
}

.order-box .content .f1 .t3 {
	display: flex;
	flex-direction: column;
	align-items: center
}

.order-box .content .f1 .t3 .x1 {
	color: #FF6F30;
	font-size: 28rpx;
	font-weight: bold
}

.order-box .content .f1 .t3 .x2 {
	color: #999999;
	font-size: 24rpx
}

.order-box .content .f2 {}

.order-box .content .f2 .t1 {
	font-size: 36rpx;
	color: #222222;
	font-weight: bold;
	line-height: 50rpx;
	margin-bottom: 6rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.order-box .content .f2 .t2 {
	font-size: 24rpx;
	color: #222222;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.order-box .content .f2 .t3 {
	font-size: 36rpx;
	color: #222222;
	font-weight: bold;
	line-height: 50rpx;
	margin-top: 30rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.order-box .content .f3 .img {
	width: 72rpx;
	height: 168rpx
}

.orderinfo {
	width: 94%;
	margin: 20rpx 3%;
	margin-top: 10rpx;
	padding: 14rpx 3%;
	background: #FFF;
	border-radius: 8px
}

.orderinfo .box-title {
	color: #161616;
	font-size: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: bold
}

.orderinfo .item {
	display: flex;
	width: 100%;
	padding: 10rpx 0;
}

.orderinfo .item .t1 {
	width: 200rpx;
	color: #161616
}

.orderinfo .item .t2 {
	flex: 1;
	text-align: right;
	color: #222222
}

.orderinfo .item .red {
	color: red
}

.bottom {
	width: 100%;
	background: #fff;
	position: fixed;
	bottom: 0px;
	left: 0px;
	display: flex;
	align-items: center;
	height: 100rpx;
}

.bottom .f1 {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	font-size: 20rpx;
	color: #373C55;
	border-right: 1px solid #EAEEED
}

.bottom .f1 .img {
	width: 44rpx;
	height: 44rpx
}

.bottom .f2 {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	font-size: 20rpx;
	color: #373C55
}

.bottom .f2 .img {
	width: 44rpx;
	height: 44rpx
}

.bottom .btn1 {
	width: 100%;
	background: linear-gradient(-90deg, #06A051 0%, #03B269 100%);
	height: 100rpx;
	line-height: 100rpx;
	color: #fff;
	text-align: center;
	font-size: 32rpx
}

.status {
	font-weight: 700;
	margin-top: 20rpx;
}

.address {
	color: #999;
	font-size: 24rpx
}

.feiji {
	width: 50rpx;
	height: 50rpx;
}

.content-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #000;
	margin-bottom: 10rpx;
}

.content-title-left {
	display: flex;
	align-items: center;
}

.express_com {
	margin: 0 10rpx;
}

.copy-btn {
	border: 1px solid #ccc;
	padding: 6rpx 10rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	background-color: #e7e7e7;
}

.t2-time {
	margin-top: 6rpx;
}

.dot-img {
	position: absolute;
	left: -12rpx !important;
	width: 20rpx !important;
	height: 20rpx !important;
}

.tab-header {
	display: flex;
	padding: 20rpx 0;

}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #000;
	position: relative;
	padding: 0 10rpx;
}

.tab-item.active {
	color: #000;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	/* background: #ff6b81; */
}
</style>